feat(badges): source and designer fields

1 files changed, 82 insertions, 46 deletions

diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index d55068e4..4aa205d9 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -66,6 +66,8 @@
 		link: string;
 		description: string;
 		image: string;
+		source: string;
+		designer: string;
 	}
 
 	interface AWCBadgesGroup {
@@ -208,6 +210,8 @@
 		const time = document.querySelector('input[type="datetime-local"]') as HTMLInputElement;
 		const category = document.querySelector('input[name="category"]') as HTMLInputElement;
 		const hidden = document.querySelector('input[name="hidden"]') as HTMLInputElement;
+		const source = document.querySelector('input[name="source"]') as HTMLInputElement;
+		const designer = document.querySelector('input[name="designer"]') as HTMLInputElement;
 
 		if (!imageURL.value) {
 			error = 'Image URL cannot be empty.';
@@ -235,7 +239,9 @@
 					: ''
 			}${
 				selectedBadge && selectedBadge.id ? `&update=${encodeURIComponent(selectedBadge.id)}` : ''
-			}&hidden=${hidden.value === 'Hidden'}`,
+			}&hidden=${hidden.value === 'Hidden'}${
+				source.value.length > 0 ? `&source=${encodeURIComponent(source.value)}` : ''
+			}${designer.value.length > 0 ? `&designer=${encodeURIComponent(designer.value)}` : ''}`,
 			{
 				method: 'PUT'
 			}
@@ -659,50 +665,6 @@
 												/>
 											</span>
 										</Dropdown>
-										<Dropdown
-											items={[false, true].map((hidden) => ({
-												name: hidden ? 'Hidden' : 'Shown',
-												url: '#',
-												onClick: () => {
-													const hiddenInput = document.querySelector('input[name="hidden"]');
-
-													if (hiddenInput instanceof HTMLInputElement)
-														hiddenInput.value = hidden ? 'Hidden' : 'Shown';
-												}
-											}))}
-											header={false}
-											center={false}
-										>
-											<span slot="title">
-												<input
-													type="text"
-													placeholder="Shown"
-													name="hidden"
-													minlength="1"
-													maxlength="1000"
-													size="15"
-													value={selectedBadge
-														? selectedBadge.hidden
-															? 'Hidden'
-															: 'Shown'
-														: 'Shown'}
-												/>
-											</span>
-										</Dropdown>
-										<button class="button-lined" on:click={submitBadge}
-											>{selectedBadge
-												? $locale().user.badges.editMode.update
-												: $locale().user.badges.editMode.add}</button
-										>
-										{#if selectedBadge}
-											{$locale().user.badges.editMode.or}
-											<button
-												class="button-lined"
-												on:click={() => {
-													if (selectedBadge) removeBadge(selectedBadge);
-												}}>{$locale().user.badges.editMode.delete}</button
-											>
-										{/if}
 										<span style="float: right;">
 											<input
 												type="datetime-local"
@@ -712,6 +674,73 @@
 											/>
 											<small>Must be full date and time, defaults to now if any fields empty</small>
 										</span>
+
+										<p />
+
+										<div class="edit-row-2">
+											<input
+												type="text"
+												placeholder={$locale().user.badges.editMode.source}
+												name="source"
+												minlength="1"
+												maxlength="1000"
+												size="16"
+												value={selectedBadge ? selectedBadge.source : ''}
+											/>
+											<input
+												type="text"
+												placeholder={$locale().user.badges.editMode.designer}
+												name="designer"
+												minlength="1"
+												maxlength="1000"
+												size="17"
+												value={selectedBadge ? selectedBadge.designer : ''}
+											/>
+											<Dropdown
+												items={[false, true].map((hidden) => ({
+													name: hidden ? 'Hidden' : 'Shown',
+													url: '#',
+													onClick: () => {
+														const hiddenInput = document.querySelector('input[name="hidden"]');
+
+														if (hiddenInput instanceof HTMLInputElement)
+															hiddenInput.value = hidden ? 'Hidden' : 'Shown';
+													}
+												}))}
+												header={false}
+												center={false}
+											>
+												<span slot="title">
+													<input
+														type="text"
+														placeholder="Shown"
+														name="hidden"
+														minlength="1"
+														maxlength="1000"
+														size="15"
+														value={selectedBadge
+															? selectedBadge.hidden
+																? 'Hidden'
+																: 'Shown'
+															: 'Shown'}
+													/>
+												</span>
+											</Dropdown>
+											<button class="button-lined" on:click={submitBadge}
+												>{selectedBadge
+													? $locale().user.badges.editMode.update
+													: $locale().user.badges.editMode.add}</button
+											>
+											{#if selectedBadge}
+												{$locale().user.badges.editMode.or}
+												<button
+													class="button-lined"
+													on:click={() => {
+														if (selectedBadge) removeBadge(selectedBadge);
+													}}>{$locale().user.badges.editMode.delete}</button
+												>
+											{/if}
+										</div>
 									{/if}
 								</div>
 							{/if}
@@ -753,8 +782,11 @@
 														badge.time
 															? $locale().dateFormatter(databaseTimeToDate(badge.time))
 															: ''
-													}${badge.description ? `\n${badge.description}` : ''}`}
+													}${badge.description ? `, ${badge.description}` : ''}${
+														badge.designer ? `\nDesigner: ${badge.designer}` : ''
+													}${badge.source ? `\nSource: ${badge.source}` : ''}`}
 													use:tooltip
+													data-tooltipPin={`badge-${badge.id}`}
 												>
 													<FallbackImage
 														source={cdn(thumbnail(badge.image))}
@@ -982,4 +1014,8 @@
 		grid-template-columns: repeat(auto-fill, minmax(8%, 1fr));
 		gap: 0.25rem;
 	}
+
+	.edit-row-2 {
+		margin-top: -1.25rem;
+	}
 </style>